<template>
	<view class="details">
		<!-- 头部 -->
		<view class="header">
			<image :src="$wanlshop.appstc('/order/img_detail_bg.png')" class="img-bg"></image>
			<view class="content">
				<view>
					<view class="status-text">{{getStatusText(orderData.state)}}</view>
					<view class="reason"><text class="reason-text">{{orderData.statetime}}</text></view>
				</view>
				<image :src="$wanlshop.appstc('/order/'+getImg(orderData.state))" class="status-img" mode="widthFix">
				</image>
			</view>
		</view>
		<!-- 物流 -->
		<view class="cu-item" @tap="onLogistics(orderData)"
			v-if="orderData.state != 7 && orderData.state != 1 && orderData.state != 2 && logisticsType">
			<view class="cu-avatar"><text class="iconfont icon-yunshuzhongwuliuxiangqingye"></text></view>
			<view class="content">
				<view>
					
					<text class="text-cut-2 text-sm wanl-pip">
						跳转到快递100查看物流
						<!-- {{orderData.logistics.status}}-{{orderData.logistics.context}} -->
					</text>
				</view>
				<view class="wanl-gray">
					<!-- <text class="text-sm">{{orderData.logistics.time}}</text> -->
				</view>
			</view>
			<view class="action">
				<text class="iconfont icon-jiantou"></text>
			</view>
		</view>
		<!-- 地址 -->
		<view class="address">
			<view class="address_left">
				<image src="../../../static/image/order/dizhi.png"></image>
			</view>
			<!-- 添加过的地址 -->
			<view class="address_center">
				<view class="address_center_top">
					<text class="name">{{orderData.address.name}}</text>
					<text class="phone">{{orderData.address.mobile}}</text>
				</view>
				<view class="address_center_bottom">
					{{orderData.address.address.replace(/\//g,' ')}}
					<text class="margin-left-xs"
						v-if="orderData.address.address_name">（{{orderData.address.address_name}}）附近</text>
				</view>
			</view>
		</view>
		<!-- 清单 -->
		<view class="details_item" v-if="orderData.order_no">
			<block v-for="(item, index) in orderData.goods" :key="item.id">
				<view class="details_item1">
					<view class="details_item1_left">
						<view class="details_item1_left_image" @tap="onGoods(item.goods_id)">
							<image :src="$wanlshop.oss(item.image, 77, 77)" mode="aspectFill"></image>
						</view>
						<view class="details_item1_left_names">
							<view class="name1" @tap="onGoods(item.goods_id)">{{item.title}}</view>
							<view class="name2">{{item.difference}}</view>
						</view>
					</view>
					<view class="details_item1_right">
						<view class="price">￥{{item.price}}</view>
						<view class="num">×{{item.number}}</view>
						<view class="price1">实付<text class="price2">￥</text><text
								class="price3">{{item.actual_payment}}</text></view>
					</view>
				</view>
				<view class="details_item2">
					<view class="details_item2_refund"
						@tap="onRefund(orderData.id, item.refund_status, item.refund_id, index)"
						v-if="orderData.state == 2 || orderData.state == 3 || orderData.state == 4 || orderData.state == 6 ">
						{{getRefund(item.refund_status)}}
					</view>
				</view>
			</block>
			<view class="details_item3">
				<view class="title">商品总价</view>
				<view class="title">￥{{orderData.pay.order_price}}</view>
			</view>
			<view class="details_item3">
				<view class="title">运费</view>
				<view class="title">￥{{orderData.pay.freight_price}}</view>
			</view>
			<view class="details_item3">
				<view class="title">优惠</view>
				<view class="title">￥ {{orderData.pay.discount_price}}</view>
			</view>
			<view class="details_item3">
				<view class="title">总价</view>
				<view class="title">￥{{orderData.pay.price}}</view>
			</view>
			<view class="details_item3" v-if="orderData.pay.actual_payment != 0">
				<view class="title">实付款</view>
				<view class="title title1">￥{{orderData.pay.actual_payment}}</view>
			</view>

		</view>
		<!-- 订单详情 -->
		<view class="details_bottom">
			<view class="details_bottom_title" @tap="toMore">
				<view class="name">订单详情</view>
				<view class="icon">
					<text class="iconfont  icon-fanhui1" v-if="infoMore"></text>
					<text class="iconfont icon-fanhui" v-else></text>
				</view>

			</view>
			<view class="details_bottom_num">
				<view class="name">订单编号：</view>
				<view class="number"> {{orderData.order_no}}</view>
			</view>
			<view class="details_bottom_num">
				<view class="name">支付交易号：</view>
				<view class="number">{{orderData.pay.pay_no}}</view>
			</view>
			<view class="details_bottom_num">
				<view class="name">创建时间：</view>
				<view class="number">{{orderData.createtime_text}} </view>
			</view>
			<block v-if="infoMore">
			<view class="details_bottom_num" v-if="orderData.paymenttime">
				<view class="name">付款时间：</view>
				<view class="number"> {{orderData.paymenttime_text}}</view>
			</view>
			<view class="details_bottom_num" v-if="orderData.delivertime">
				<view class="name">发货时间：</view>
				<view class="number">{{orderData.delivertime_text}} </view>
			</view>
			<view class="details_bottom_num" v-if="orderData.taketime">
				<view class="name">收获时间：</view>
				<view class="number">{{orderData.taketime_text}} </view>
			</view>
			</block>
			<view class="details_bottom_service">
				<view class="details_bottom_service_image" @click="getPhone">
					<image src="../../../static/image/class/kefu.png"></image>
					<text>联系客服</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderData: {
					order_no: '',
					address: {
						name: '加载中...',
						mobile: '',
						address: '',
						address_name: ''
					},
					logistics: {
						context: '',
						status: '',
						time: ''
					},
					statetime: ''
				},
				logisticsType: false,
				infoMore: false
			}
		},
		methods: {
			// 获取订单
			async loadData(data) {
				this.$api.get({
					url: '/wanlshop/order/getOrderInfo',
					data: data,
					success: res => {
						this.orderData = res;
						console.log('res', res)
						this.logisticsType = true;
						if (res.state == 0) {
							this.orderData.statetime = '剩余时间0';
						} else if (res.state == 1) {
							var diff = (res.createtime + res.config.cancel * 86400) - Date.parse(
								new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.orderData.statetime = '还剩' + minutes + '分自动关闭订单';
							}
							if (hours > 0) {
								this.orderData.statetime = '还剩' + hours + '天' + minutes + '分自动关闭订单';
							}
							if (days > 0) {
								this.orderData.statetime = '还剩' + days + '天' + hours + '小时' + minutes +
									'分自动关闭订单';
							}
						} else if (res.state == 2) {
							this.orderData.statetime = '等待卖家发货';
						} else if (res.state == 3) {
							var diff = (res.delivertime + res.config.receiving * 86400) - Date.parse(
								new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.orderData.statetime = '还剩' + minutes + '分自动确认收货';
							}
							if (hours > 0) {
								this.orderData.statetime = '还剩' + hours + '天' + minutes + '分自动确认收货';
							}
							if (days > 0) {
								this.orderData.statetime = '还剩' + days + '天' + hours + '小时' + minutes +
									'分自动确认收货';
							}
						} else if (res.state == 4) {
							var diff = (res.taketime + res.config.comment * 86400) - Date.parse(
								new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.orderData.statetime = '还剩' + minutes + '分自动评论';
							}
							if (hours > 0) {
								this.orderData.statetime = '还剩' + hours + '天' + minutes + '分自动评论';
							}
							if (days > 0) {
								this.orderData.statetime = '还剩' + days + '天' + hours + '小时' + minutes +
									'分自动评论';
							}
						} else if (res.state == 6) {
							this.orderData.statetime = res.dealtime_text;
						} else if (res.state == 7) {
							this.orderData.statetime = '订单已取消';
						}
					}
				});
			},
			// 查看物流状态
			onLogistics(item){
				console.log('item',item)
				uni.navigateToMiniProgram({
					appId: 'wx6885acbedba59c14',
					path: 'pages/result/result?nu='+item.express_no+'&com='+item.express_name+'&querysource=third_xcx',
					envVersion: 'release',
					success(res) {
						// 打开成功
						console.log('查看物流', res);
						
					},
					fail(res) {
						
						console.log('失败')
					}
				})
				
			},
			getImg(status) {
				return ["img_order_payment3x.png", "img_order_send3x.png", "img_order_received3x.png",
					"img_order_signed3x.png", "img_order_closed3x.png", "img_order_signed3x.png",
					"img_order_closed3x.png"
				][status - 1];
			},
			getStatusText(status) {
				return ["等待您付款", "付款成功", "待收货", "待评论", "退款订单", "订单已完成", "交易关闭"][status - 1];
			},
			getRefund(status) {
				return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];
			},
			onRefund(order_id, refund_status, refund_id, index){
				if (refund_status == 0) { //申请退款
					this.$wanlshop.to(`/pages/mines/refund/apply/apply?data=${JSON.stringify({
							order_id: this.orderData.id,
							goods: this.orderData.goods[index],
							freight_type: this.orderData.freight_type,
							discount_price: this.orderData.pay.discount_price,
							goods_number: this.orderData.goods.length
						})}`);
				}else{ // 查看详情
					this.$wanlshop.to(`/pages/mines/refund/details/details?id=${refund_id}`);
				}
			},
			// 折叠项
			toMore(){
				this.infoMore = !this.infoMore;
			},
			// 点击商品的图片和标题跳转到商品详情
			onGoods(item){
				console.log('item',item)
			var obj={
					id:item
				}
				uni.navigateTo({
					url:'../../productDetails/productDetails?gress=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			// 拨打客服电话
			getPhone(){
				uni.makePhoneCall({
					// 手机号
					phoneNumber: '0574-87880789',
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				})
				
			},
		},
		onLoad(option) {
			this.loadData({
				id: option.id
			});
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F0F0F0;
	}

	.details {
		.header {
			// background-color: pink;
			height: 180rpx;
			position: relative;

			.img-bg {
				width: 100%;
				height: 180rpx;
			}

			.content {
				height: 180rpx;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				// bottom: 0;
				// background-color: red;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 50rpx;

				view {

					// background-color: #007AFF;
					.status-text {
						font-size: 34rpx;
						line-height: 34rpx;
						color: #FEFEFE;
						margin-bottom: 5rpx;
						// font-weight: bold;

					}

					.reason {
						font-size: 24rpx;
						color: rgba(254, 254, 254, 0.75);
					}
				}

				.status-img {
					width: 100rpx;
					height: 100rpx;
					// background-color: #1CBBB4;
				}
			}
		}

		.cu-item {
			background-color:#FFFFFF;
			height: 160rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			border-bottom: 1rpx solid #F1F1F1;

			.cu-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				color: white;
				background-image: linear-gradient(-90deg, #2676fa 0, #23d7ff 100%);
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.iconfont {
					font-size: 60rpx;
				}
			}

			.content {
				// background-color: #1CBBB4;
				color: #222222;
				width: 600rpx;

				view {
					// background-color: #0081FF;

					.text-cut-2 {
						// background-color: #39B54A;
						font-size: 26rpx;
					}
				}

				.wanl-gray {
					color: #828282;

					.text-sm {
						font-size: 26rpx;
					}
				}
			}

			.action {
				// background-color: #00ADEF;

				.iconfont {
					font-size: 40rpx;
					color: #828282;
				}
			}
		}

		.address {
			background-color: #FFFFFF;
			display: flex;
			height: 160rpx;
			// justify-content: space-between;
			align-items: center;

			// background-color: pink;
			.address_left {
				// background-color:#4395bf ;
				width: 120rpx;
				height: 120rpx;
				line-height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.address_center {
				// background-color:#c763a7 ;
				width: 580rpx;
				// height: 120rpx;

				&_top {
					// background-color: #F0AD4E;
					font-size: 28rpx;
					margin-bottom: 10rpx;

					.name {
						color: #282828;
						margin-right: 25rpx;
					}

					.phone {
						color: #8c8b8b;
					}
				}

				&_bottom {
					font-size: 26rpx;
					color: #282828;
					// background-color: red;
					// 多行显示超出部分显示省略号
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					word-break: break-all;
				}

			}


		}

		&_item {
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx;
			margin-top: 20rpx;

			.details_item1 {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.details_item1_left {
					display: flex;
					align-items: center;

					&_image {
						width: 120rpx;
						height: 120rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					&_names {
						// background-color: pink;
						margin-left: 20rpx;
						width: 380rpx;

						.name1 {
							// background-color: red;
							font-size: 28rpx;
							color: #282828;
							margin-bottom: 10rpx;
							//单行文本超出部分隐藏
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

						}

						.name2 {
							font-size: 26rpx;
							color: #8c8b8b;
						}
					}
				}

				&_right {
					// background-color: #1CBBB4;
					font-size: 26rpx;
					text-align: right;

					.price {
						color: #8c8b8b;
					}

					.num {
						color: #8c8b8b;
					}

					.price1 {
						color: #fe6600;

						.price2 {
							font-size: 24rpx;
						}
					}
				}

			}

			.details_item2 {
				// background-color: pink;
				display: flex;
				justify-content: flex-end;
				margin: 30rpx 0;

				&_refund {
					// width: 100rpx;
					padding: 0 15rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 26rpx;
					text-align: center;
					color: #282828;
					border: 1px solid #888888;
					border-radius: 10rpx;
				}
			}

			.details_item3 {
				// background-color: pink;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.title {
					font-size: 26rpx;
					color: #282828;
				}

				.title1 {
					color: #fe6600;
				}
			}

		}

		.details_bottom {
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx 30rpx 0 30rpx;
			margin-top: 20rpx;
			font-size: 26rpx;

			&_title {
				// background-color: pink;
				font-size: 26rpx;
				color: #282828;
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.icon{
					.iconfont{
						font-size: 30rpx;
						color: #828282;
					}
				}
			}

			&_num {
				// background-color: pink;
				display: flex;
				align-items: center;
				height: 60rpx;
				line-height: 60rpx;

				.name {
					color: #8c8b8b;
					// background-color: #39B54A;
					width: 160rpx;
				}

				.number {
					// background-color: #00ADEF;
					color: #282828;
				}
			}

			&_service {
				border-top: 1rpx solid #F1F1F1;
				height: 100rpx;
				line-height: 100rpx;

				&_image {
					display: flex;
					align-items: center;
					justify-content: center;

					// background-color: pink;
					image {
						width: 50rpx;
						height: 50rpx;
					}

					text {
						font-size: 30rpx;
						color: #282828;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>
